<template>
  <div class="rank">
      <mt-cell to="" is-link :title="item.name"
        v-for="item in list" :key="item.name">
        <img slot="icon" :src="item.img">
      </mt-cell>
  </div>
</template>

<script>
import { Cell } from 'mint-ui'
import {  getRank } from '@/severs'

export default {
  name: 'rank',
  components: {
    mtCell: Cell
  },
  data () {
    return {
      list: []
    }
  },
  async created(){
     let {data} =  await getRank();
     this.list = data.data.map(item => {
        var img = item.imgurl.replace(/{size}/i, '400');
        return {
           name: item.rankname,
           img:  img
        }
     })
  }
}
</script>

<style lang='less'>
   .rank {
      margin-top:6.8rem;
      padding: 0 10px;

     .mint-cell img { width: 97px; height:97px; padding:10px 0;}
     .mint-cell-text { font-size: 18px;}

     
   }
</style>
